﻿<template>
  <div class="app-container">
    <div class="filter-title">
      <el-form label-position="right" label-width="80px">
        <el-form-item :label="$t('merchant.name')+' :'">
          <el-input
            v-model="listQuery.merchant_name"
            style="width: 150px"
            class="filter-item"
            :placeholder="$t('merchant.name')"
            @keyup.enter.native="handleFilter"
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('equipment.type')+' :'">
          <el-select
            v-model="listQuery.type_id"
            clearable
            style="width: 150px"
            class="filter-item"
            :placeholder="$t('equipment.type')"
          >
            <el-option
              v-for="item in equipmentTypeOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('public.status')+' :'">
          <el-select
            v-model="listQuery.status"
            clearable
            style="width: 150px"
            class="filter-item"
            :placeholder="$t('public.status')"
          >
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-button
          style="margin-left:20px"
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          @click="handleFilter"
        >{{ $t('table.search') }}</el-button>
        <el-button
          class="filter-item"
          style="margin-left: 10px"
          type="primary"
          @click="handleRefresh"
        >{{ $t('table.refresh') }}</el-button>
        <div v-show="!showSearchItem" class="showDown" @click="showSearchItem = true">
          <i class="el-icon-d-arrow-right"></i>
        </div>
        <div v-show="showSearchItem" class="showUp" @click="showSearchItem = false">
          <i class="el-icon-d-arrow-left"></i>
        </div>
      </el-form>
    </div>
    <div v-show="showSearchItem" class="filter-container">
      <el-form label-position="right" label-width="80px">
        <el-form-item :label="$t('application.number')+' :'">
          <el-input
            v-model="listQuery.startNumber"
            style="width: 150px"
            class="filter-item"
            :placeholder="$t('application.startNumber')"
            @keyup.enter.native="handleFilter"
          ></el-input>
          <el-input
            v-model="listQuery.endNumber"
            style="width: 150px"
            class="filter-item"
            :placeholder="$t('application.endNumber')"
            @keyup.enter.native="handleFilter"
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('rule.data')+' :'">
          <div class="filter-item">
            <el-date-picker
              v-model="listQuery.startCreateTime"
              :picker-options="pickerOptionsB"
              type="date"
              :placeholder="$t('rule.startTime')"
              value-format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>
          </div>
          <div class="filter-item">
            <el-date-picker
              v-model="listQuery.endCreateTime"
              :picker-options="pickerOptionsE"
              type="date"
              :placeholder="$t('rule.endTime')"
              value-format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(255,255,255,0.2)"
      border
      fit
      highlight-current-row
      style="width: 100%min-height:1000px"
    >
      <el-table-column fixed="left" align="center" :label="$t('table.id')" width="65">
        <template slot-scope="scope">
          <span>{{ (listQuery.page-1)*listQuery.limit+scope.$index+1 }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip :label="$t('merchant.name')">
        <template slot-scope="scope">
          <span>{{ scope.row.merchant_name }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip :label="$t('public.region')">
        <template slot-scope="scope">
          <span>{{ scope.row.region_name }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip :label="$t('application.number')">
        <template slot-scope="scope">
          <span>{{ scope.row.number }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip :label="$t('equipment.type')">
        <template slot-scope="scope">
          <span>{{ equipmentTypeEs(equipmentTypeOptions, scope.row.type_id) }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip :label="$t('circle.name')">
        <template slot-scope="scope">
          <span>{{ scope.row.circle_name }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip :label="$t('screen.attributes')">
        <template slot-scope="scope">
          <span>{{ scope.row.screen_attr_name }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip :label="$t('public.linkman')">
        <template slot-scope="scope">
          <span>{{ scope.row.linkman }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip :label="$t('public.mobile')">
        <template slot-scope="scope">
          <span>{{ scope.row.linkman_mobile }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip :label="$t('application.time')">
        <template slot-scope="scope">
          <span>{{ scope.row.create_time }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip :label="$t('public.status')">
        <template slot-scope="scope">
          <span :class="applicColor(scope.row.status)">{{ applicStatus(scope.row.status) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        align="center"
        :label="$t('table.actions')"
        :width="operWidth"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            @click="handleRead(scope.row)"
          >{{ $t('table.read') }}</el-button>
          <el-button
            v-if="permission.transport"
            type="primary"
            size="mini"
            @click="handleTransport(scope.row)"
            :disabled="scope.row.status===2?false:true"
          >{{ $t('table.transport') }}</el-button>
          <el-button
            v-if="permission.review"
            type="primary"
            size="mini"
            @click="handleReview(scope.row)"
            :disabled="scope.row.status===1?false:true"
          >{{ $t('table.review') }}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination
        background
        :current-page="listQuery.page"
        :page-sizes="[10,20,30,50]"
        :page-size="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
    <!-- 审核 -->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="temp"
        label-position="right"
        label-width="35%"
        style="width: 300px margin:auto"
        size="small"
      >
        <el-form-item :label="$t('merchant.name')+' :'">
          <span>{{ temp.merchant_name }}</span>
        </el-form-item>
        <el-form-item :label="$t('public.region')+' :'">
          <span>{{ temp.region_name }}</span>
        </el-form-item>
        <el-form-item :label="$t('application.number')+' :'">
          <span>{{ temp.number }}</span>
        </el-form-item>
        <el-form-item :label="$t('equipment.type')+' :'">
          <span>{{ equipmentTypeEs(equipmentTypeOptions, temp.type_id)}}</span>
        </el-form-item>
        <el-form-item :label="$t('circle.name')+' :'">
          <span>{{ temp.circle_name }}</span>
        </el-form-item>
        <el-form-item :label="$t('screen.attributes')+' :'">
          <span>{{ temp.screen_attr_name }}</span>
        </el-form-item>
        <el-form-item :label="$t('public.linkman')+' :'">
          <span>{{ temp.linkman }}</span>
        </el-form-item>
        <el-form-item :label="$t('public.mobile')+' :'">
          <span>{{ temp.linkman_mobile }}</span>
        </el-form-item>
        <el-form-item :label="$t('application.time')+' :'">
          <span>{{ temp.create_time }}</span>
        </el-form-item>
        <el-form-item v-if="temp.logistics_name" :label="$t('logistics.name')+' :'">
          <span>{{ temp.logistics_name }}</span>
        </el-form-item>
        <el-form-item v-if="temp.order_number" :label="$t('logistics.orderNumber')+' :'">
          <span>{{ temp.order_number }}</span>
        </el-form-item>
        <el-form-item v-if="temp.logistics_time" :label="$t('logistics.time')+' :'">
          <span>{{ temp.logistics_time }}</span>
        </el-form-item>
        <el-form-item v-if="dialogStatus=='review'" :label="$t('public.status')+' :'" prop="status">
          <el-radio-group v-model="temp.status">
            <el-radio :label="2">待发货</el-radio>
            <el-radio :label="6">未通过</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          v-if="dialogStatus=='review' && temp.status === 6"
          :label="$t('public.auditOpinion')+' :'"
          prop="check_remark"
        >
          <el-input v-model="temp.check_remark" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">{{ $t('table.cancel') }}</el-button>
        <el-button
          v-if="dialogStatus=='read'"
          type="primary"
          @click="dialogFormVisible = false"
        >{{ $t('table.confirm') }}</el-button>
        <el-button
          v-else
          type="primary"
          :disabled="reviewDisabled"
          @click="reviewData()"
        >{{ $t('table.confirm') }}</el-button>
      </div>
    </el-dialog>
    <!-- 发货 -->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="transportFormVisible">
      <el-form
        ref="transportForm"
        :rules="transportRules"
        :model="transportTemp"
        label-position="right"
        label-width="35%"
        style="width: 300px margin:auto"
        size="small"
      >
        <el-form-item :label="$t('logistics.name')+' :'" prop="logistics_name">
          <el-input v-model="transportTemp.logistics_name"></el-input>
        </el-form-item>
        <el-form-item :label="$t('logistics.orderNumber')+' :'" prop="order_number">
          <el-input v-model="transportTemp.order_number"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="transportFormVisible = false">{{ $t('table.cancel') }}</el-button>
        <el-button
          v-if="dialogStatus=='read'"
          type="primary"
          @click="transportFormVisible = false"
        >{{ $t('table.confirm') }}</el-button>
        <el-button
          v-else
          type="primary"
          :disabled="transportDisabled"
          @click="transportData()"
        >{{ $t('table.confirm') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import selectPage from "@/views/select/SelectPage"; // 分页选择控件

export default {
  name: "EquipmentAppalication",
  components: {
    "select-page": selectPage
  },
  data() {
    const remark = (rule, value, callback) => {
      if (value) {
        if (value.length <= 0) {
          callback(new Error("请输入审核意见"));
        } else if (value.length > 300) {
          callback(new Error("审核意见不能超过300个字符"));
        } else {
          callback();
        }
      } else {
        callback(new Error("请输入审核意见"));
      }
    };
    const status = (rule, value, callback) => {
      if (value === 1) {
        callback(new Error("请审核!"));
      } else {
        callback();
      }
    };
    return {
      showSearchItem: false,
      tableKey: 0,
      list: null,
      total: null,
      listLoading: true,
      statusOptions: [
        {
          value: 1,
          label: "审核中"
        },
        {
          value: 2,
          label: "待发货"
        },
        {
          value: 3,
          label: "待收货"
        },
        {
          value: 4,
          label: "待绑定"
        },
        {
          value: 5,
          label: "已完成"
        },
        {
          value: 6,
          label: "未通过"
        }
      ],
      listQuery: {
        page: 1,
        limit: 20,
        merchant_name: "",
        status: "",
        type_id: "",
        startNumber: "",
        endNumber: "",
        startCreateTime: "",
        endCreateTime: ""
      },
      temp: {
        id: undefined,
        status: undefined,
        check_remark: ""
      },
      transportTemp: {
        id: undefined,
        logistics_name: "",
        order_number: ""
      },
      dialogFormVisible: false,
      transportFormVisible: false,
      dialogStatus: "",
      textMap: {
        transport: "发货",
        review: "审核",
        read: "查看"
      },
      rules: {
        check_remark: [{ required: true, trigger: "blur", validator: remark }],
        status: [{ required: true, trigger: "change", validator: status }]
      },
      transportRules: {
        logistics_name: [
          { required: true, message: "请输入物流名称", trigger: "blur" }
        ],
        order_number: [
          { required: true, message: "请输入物流单号", trigger: "blur" }
        ]
      },
      equipmentTypeOptions: [],
      reviewDisabled: false,
      transportDisabled: false,
      pageSize: 20,
      permission: {
        del: false,
        update: false,
        review: false
      },
      pickerOptionsB: {
        disabledDate: this.disabledDateB
      },
      pickerOptionsE: {
        disabledDate: this.disabledDateE
      }
    };
  },
  computed: {
    operWidth: function() {
      let itemCount = 1;
      if (this.permission.transport) {
        itemCount += 1;
      }
      if (this.permission.review) {
        itemCount += 1;
      }
      return itemCount * 80 + "px";
    }
  },
  created() {
    if (this.$store.state.permission.jurisdiction === "*") {
      this.permission.transport = true;
      this.permission.review = true;
    } else {
      const jurisdiction = this.$store.state.permission.jurisdiction.split(",");
      jurisdiction.forEach(element => {
        const id = parseInt(element);
        if (id === 247) {
          this.permission.transport = true;
        } else if (id === 141) {
          this.permission.review = true;
        }
      });
    }
    this.getEquipmentType();
    this.getList();
  },
  methods: {
    disabledDateB(time) {
      if (this.listQuery.endCreateTime) {
        return (
          time.getTime() >
          new Date(this.listQuery.endCreateTime).getTime() +
            24 * 3600 * 1000 -
            8.64e7
        );
      }
    },
    disabledDateE(time) {
      if (this.listQuery.startCreateTime) {
        return (
          time.getTime() <
          new Date(this.listQuery.startCreateTime).getTime() - 8.64e6
        );
      }
    },
    getList() {
      this.listLoading = true;
      const data = {
        rows: this.listQuery.limit,
        page: this.listQuery.page,
        merchant_name: this.listQuery.merchant_name
          ? this.listQuery.merchant_name
          : "",
        status: this.listQuery.status ? this.listQuery.status : "",
        type_id: this.listQuery.type_id ? this.listQuery.type_id : "",
        startNumber: this.listQuery.startNumber
          ? this.listQuery.startNumber
          : "",
        endNumber: this.listQuery.endNumber ? this.listQuery.endNumber : "",
        startCreateTime: this.listQuery.startCreateTime
          ? this.listQuery.startCreateTime
          : ""
      };
      if (this.listQuery.endCreateTime) {
        const date = new Date(this.listQuery.endCreateTime);
        data["endCreateTime"] = this.timestampToTime(
          date.getTime() + (60 * 60 * 24 * 1000 - 1)
        );
      }
      const equipmentRegisterPath = {
        // 获取智能广告终端申请列表
        company: "STQ",
        api: "pc_equipmentRequest_index",
        version: "1.0",
        data: data
      };
      this.socketApi.sendSock(JSON.stringify(equipmentRegisterPath), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },
    reviewData() {
      // 审核广告机
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          if (!this.reviewDisabled) {
            this.updateDisabled = true;
            const data = {
              id: this.temp.id,
              status: this.temp.status,
              check_remark: this.temp.check_remark
            };
            const adEditPath = {
              company: "STQ",
              api: "pc_equipmentRequest_check",
              version: "1.0",
              data: data
            };
            this.socketApi.sendSock(JSON.stringify(adEditPath), res => {
              if (res) {
                this.socketData(res);
              }
              setTimeout(() => {
                this.reviewDisabled = false;
              }, 1000);
            });
          }
        }
      });
    },
    transportData() {
      // 发货
      this.$refs["transportForm"].validate(valid => {
        if (valid) {
          if (!this.reviewDisabled) {
            this.transportDisabled = true;
            const data = {
              id: this.transportTemp.id,
              logistics_name: this.transportTemp.logistics_name,
              order_number: this.transportTemp.order_number
            };
            const adEditPath = {
              company: "STQ",
              api: "pc_equipmentRequest_sendCargo",
              version: "1.0",
              data: data
            };
            this.socketApi.sendSock(JSON.stringify(adEditPath), res => {
              if (res) {
                this.socketData(res);
              }
              setTimeout(() => {
                this.transportDisabled = false;
              }, 1000);
            });
          }
        }
      });
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getList();
    },
    handleRefresh() {
      this.listQuery = {
        page: 1,
        limit: 20,
        merchant_name: "",
        status: "",
        type_id: "",
        startNumber: "",
        endNumber: "",
        startCreateTime: "",
        endCreateTime: ""
      };
      this.getList();
    },
    handleReview(row) {
      // 打开审核弹窗
      this.temp = Object.assign({}, row); // copy obj
      this.dialogStatus = "review";
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate();
      });
    },
    handleTransport(row) {
      // 打开发货弹窗
      this.transportTemp = Object.assign({}, row); // copy obj
      this.dialogStatus = "transport";
      this.transportFormVisible = true;
      this.$nextTick(() => {
        this.$refs["transportForm"].clearValidate();
      });
    },
    handleRead(row) {
      // 打开查看弹窗
      this.temp = Object.assign({}, row); // copy obj
      this.dialogStatus = "read";
      this.dialogFormVisible = true;
    },
    // 获取设备类型
    getEquipmentType() {
      const merchantGetPath = {
        company: "STQ",
        api: "pc_equipmentType_index",
        version: "1.0",
        data: {}
      };
      this.socketApi.sendSock(JSON.stringify(merchantGetPath), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },
    socketData(res) {
      if (res !== '{"type":"ping"}') {
        const resj = JSON.parse(res);
        if (resj.code === -1) {
          this.$message.error(resj.message);
        } else {
          if (resj.api === "pc_equipmentRequest_index") {
            this.total = resj.count;
            this.list = resj.data;
            this.listLoading = false;
          } else if (resj.api === "pc_equipmentRequest_check") {
            this.dialogFormVisible = false;
            this.getList();
            this.$notify({
              title: "成功",
              message: "审核成功",
              type: "success",
              duration: 2000
            });
          } else if (resj.api === "pc_equipmentType_index") {
            this.equipmentTypeOptions = resj.data;
          } else if (resj.api === "pc_equipmentRequest_sendCargo") {
            this.transportFormVisible = false;
            this.getList();
            this.$notify({
              title: "成功",
              message: "发货成功",
              type: "success",
              duration: 2000
            });
          }
        }
      }
    }
  }
};
</script>
